<template>
	<view class="container">
		<uwo-nav-bar bgColor="#2979ff">
			<template #content>单列表刷新</template>
		</uwo-nav-bar>
		<uwo-search-bar bgColor="#FFFFFF" :orderData="orderData" :filterData="filterData" @search="search"></uwo-search-bar>
		<mescroll-body ref="mescrollRef" :top="80" :safearea="true" :topbar="true" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<uni-card v-for="(item, index) in dataSource" :key="index" :is-shadow="false" :title="item.title" sub-title="1066002323">
				<view class="flex uni-mb-1">
					<view class="basis-lg text-cut">
						<uni-icons class="inline-flex" custom-prefix="uwofont" type="uwo-bianhao" size="14" color="#2979ff"></uni-icons>
						力学与安全工程学院
					</view>
					<view class="basis-sm">
						<uni-icons custom-prefix="uwofont" type="uwo-dengji" size="14" color="#2979ff"></uni-icons>
						{{ labLevel(item.level) }}
					</view>
				</view>
				<view class="flex uni-mb-1">
					<view class="basis-lg">
						<uni-icons custom-prefix="uwofont" type="uwo-fenlei" size="14" color="#2979ff"></uni-icons>
						化学类
					</view>
					<view class="basis-sm">
						<uni-icons custom-prefix="uwofont" type="uwo-shiyanxingzhi" size="14" color="#2979ff"></uni-icons>
						科研用房
					</view>
				</view>

				<view class="flex uni-mb-1">
					<view class="flex-sub">
						<uni-icons custom-prefix="uwofont" type="uwo-fuzeren" size="14" color="#2979ff"></uni-icons>
						负责人：
						<text class="uni-primary" @click="callPhone(17335778685)">皮卡丘/17335778685</text>
					</view>
				</view>
			</uni-card>
		</mescroll-body>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom); // 调用mescroll的hook
import { labLevel } from '@/common/js/sysDict.js';
const dataSource = ref([]);
let searchParams = {};

const upOption = {
	auto: true, //是否在初始化后,自动执行上拉回调callback; 默认true
	page: {
		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
};
/**
 * 排序选项
 */
const orderData = ref([
	{
		label: '默认',
		value: 'createdBy-DESC'
	},
	{
		label: '实验室等级正序',
		value: 'level-ASC'
	},
	{
		label: '实验室等级倒序',
		value: 'level-DESC'
	}
]);
/**
 * 筛选选项
 */
const filterData = ref([
	{
		key: 'level',
		title: '实验室等级',
		type: 'checkbox',
		items: [
			{ label: '一级', value: '1', checked: false },
			{ label: '二级', value: '2', checked: false },
			{ label: '三级', value: '3', checked: false },
			{ label: '四级', value: '4', checked: false }
		]
	},
	{
		key: 'key1',
		title: '实验室性质',
		type: 'radio',
		items: [
			{ label: '科研用房', value: '1', checked: false },
			{ label: '教学用房', value: '2', checked: false },
			{ label: '科研用房', value: '3', checked: false },
			{ label: '教学用房', value: '4', checked: false },
			{ label: '科研用房', value: '5', checked: false },
			{ label: '教学用房', value: '6', checked: false }
		]
	},
	{
		key: 'key2',
		title: '实验室分类',
		type: 'radio',
		items: [
			{ label: '化学类', value: '1', checked: false },
			{ label: '生物类', value: '2', checked: false },
			{ label: '机电类', value: '3', checked: false },
			{ label: '辐射类', value: '4', checked: false },
			{ label: '其他', value: '5', checked: false }
		]
	},
	{
		key: 'key3',
		title: '实验室分类3',
		type: 'radio',
		items: [
			{ label: '化学类', value: '1', checked: false },
			{ label: '生物类', value: '2', checked: false },
			{ label: '机电类', value: '3', checked: false },
			{ label: '辐射类', value: '4', checked: false },
			{ label: '其他', value: '5', checked: false },
			{ label: '化学类1', value: '11', checked: false },
			{ label: '生物类2', value: '21', checked: false },
			{ label: '机电类3', value: '31', checked: false },
			{ label: '辐射类4', value: '41', checked: false },
			{ label: '其他5', value: '52', checked: false },
			{ label: '化学类8', value: '12', checked: false },
			{ label: '生物类9', value: '22', checked: false },
			{ label: '机电类44', value: '32', checked: false },
			{ label: '辐射类21', value: '43', checked: false },
			{ label: '其他12', value: '54', checked: false },
			{ label: '其他54', value: '52', checked: false },
			{ label: '化学类84', value: '112', checked: false },
			{ label: '生物类94', value: '212', checked: false },
			{ label: '机电类444', value: '321', checked: false },
			{ label: '辐射类241', value: '423', checked: false },
			{ label: '其他124', value: '514', checked: false }
		]
	},
	{
		key: 'key4',
		title: '实验室分类4',
		type: 'radio',
		items: [
			{ label: '化学类', value: '1', checked: false },
			{ label: '生物类', value: '2', checked: false },
			{ label: '机电类', value: '3', checked: false },
			{ label: '辐射类', value: '4', checked: false },
			{ label: '其他', value: '5', checked: false },
			{ label: '化学类1', value: '11', checked: false },
			{ label: '生物类2', value: '21', checked: false },
			{ label: '机电类3', value: '31', checked: false },
			{ label: '辐射类4', value: '41', checked: false },
			{ label: '其他5', value: '52', checked: false },
			{ label: '化学类8', value: '12', checked: false },
			{ label: '生物类9', value: '22', checked: false },
			{ label: '机电类44', value: '32', checked: false },
			{ label: '辐射类21', value: '43', checked: false },
			{ label: '其他12', value: '54', checked: false },
			{ label: '其他54', value: '52', checked: false },
			{ label: '化学类84', value: '112', checked: false },
			{ label: '生物类94', value: '212', checked: false },
			{ label: '机电类444', value: '321', checked: false },
			{ label: '辐射类241', value: '423', checked: false },
			{ label: '其他124', value: '514', checked: false }
		]
	}
]);
/**
 * 如果页面存在电话号，则加上拨打电话
 */
const callPhone = (tel) => {
	uni.makePhoneCall({
		phoneNumber: tel
	});
};
/**
 * 数据请求
 */
const getList = () => {
	console.log(searchParams);
	return new Promise((r) => {
		let rows = [];
		for (var i = 0; i < 10; i++) {
			rows.push({
				title: '实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称实验室名称' + i,
				state: i < 5 ? '1' : '0',
				level: Math.floor(Math.random() * 4) + 1 + ''
			});
		}
		setTimeout(() => {
			const res = {
				code: 1,
				data: {
					pages: 100,
					pageSize: 10,
					pageNumber: 1,
					total: 1000,
					rows: rows
				}
			};
			r(res);
		}, 500);
	});
};
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
const upCallback = (page) => {
	getList({
		pageNumber: page.num,
		pageSize: page.size
	})
		.then((res) => {
			if (res.code === 1) {
				const data = res.data;
				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				getMescroll().endBySize(data.rows.length, data.pages);
				if (page.num == 1) dataSource.value = []; //如果是第一页需手动制空列表
				dataSource.value = dataSource.value.concat(data.rows); //追加新数据
			}
		})
		.catch(() => {
			//联网失败, 结束加载
			getMescroll().endErr();
		});
};
const search = (params) => {
	if (params.order) {
		// name-order
		const str = params.order.split('-');
		params.sortName = str[0];
		params.sortOrder = str[1];
		delete params.order;
	}
	searchParams = params;
	getMescroll().resetUpScroll(); // 重置列表数据为第一页
	getMescroll().scrollTo(0, 0); // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
};
</script>

<style></style>
